<template>
	<view>
		<Sheader :title="'编辑资料'" :background="'#fff'" :color="'#203136'" :showBack="true" :backFn="backFn"/>
		<u-form class="edit-form">
			<u-form-item label-width="210" :label="editOption.label" :required="editOption.required" v-if="editOption.type=='text'">
				<u-input 
					v-model="formValue" 
					:type="'text'"
					:placeholder="editOption.placeholder"
					:clearable="true"
					:border="false"
					maxlength="17" :password-icon="false"/>
			</u-form-item>
			<u-form-item label-width="210" :label="editOption.label" :required="editOption.required" v-else-if="editOption.type=='select'">
				<u-input 
				v-model="formValue"
				type="select"
				:placeholder="editOption.placeholder"
				:clearable="true"
				:border="false" @click="showType = true"
				maxlength="17" :password-icon="false"/>
				<u-action-sheet :list="editOption.lists" v-model="showType" @click="actionType"></u-action-sheet>
			</u-form-item>
			<u-form-item label-width="210" :label="editOption.label" :required="editOption.required" v-else-if="editOption.type=='date'">
				<u-input 
				v-model="formValue"
				type="select"
				:placeholder="editOption.placeholder"
				:clearable="true"
				:border="false" @click="showType = true"
				maxlength="17" :password-icon="false"/>
				<u-calendar v-model="showType" :mode="'date'" @change="changeDate"></u-calendar>
			</u-form-item>
			<view class="send-btn" @click="sendEdit">
				提交
			</view>
		</u-form>
	</view>
</template>

<script>
	import Sheader from '@/components/Sheader/index.vue'
	export default {
		data() {
			return {
				formValue: '',
				showType: false
			}
		},
		components: {
			Sheader
		},
		props: {
			editValue: {
				default: ''
			},
			editKey: {
				default: ''
			},
			editOption: {
				default: () => {
					return {
						id: '',
						type: 'text',
						default: '请输入',
						label: '',
						required: true,
						lists: [],
						index: 1
					}
				}
			}
		},
		mounted() {
			if (this.editOption.label == '性别') {
				this.formValue = this.editValue == '1' ? '男' : '女'
			} else {
				this.formValue = this.editValue
			}
		},
		methods: {
			actionType(index) {
				this.formValue = this.editOption.lists[index].text || this.editOption.lists[index].value;
			},
			changeDate(e) {
				this.formValue = e.result
			},
			backFn() {
				this.$emit('closeEdit');
			},
			async sendEdit() {
				const form = {}
				form.id = this.editOption.id
				if (this.editOption.label == '性别') {
					form[this.editKey] = this.formValue == '男' ? 1 : 2
				} else {
					form[this.editKey] = this.formValue
				}
				const reqUrl = window.localStorage.fw_userType == 1 ? '/user/modify' : '/provider/modify'
				await this.$http.request(reqUrl, form, 'POST', true, false).then((res) => {
					if (res.success) {
						this.$emit('closeEdit', form);
						return
					}
				})
			}
		}
	}
</script>

<style>
	.edit-form {
		position: fixed;
		top: 90rpx;
		width: 88vw;
		left: 6vw;
		bottom: 0;
		background-color: #fff;
		z-index: 9999;
	}
	.send-btn {
		width: 88vw;
		height: 88rpx;
		line-height: 88rpx;
		background: #2979FF;
		text-align: center;
		opacity: 1;
		border-radius: 4px;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		opacity: 1;	
		margin-top: 40rpx;
	}
</style>
